<template>
  <div class="speise-calculator">
    <h2>自然碳酸化计算器 (Speise)</h2>
    
    <!-- 基本参数输入 -->
    <div class="input-section">
      <div class="input-group">
        <label>啤酒体积:</label>
        <div class="input-with-unit">
          <input 
            type="number" 
            v-model="beerVolume" 
            min="0" 
            max="10000"
            step="0.1"
            placeholder="20"
          >
          <select v-model="volumeUnit">
            <option value="L">升 (L)</option>
            <option value="mL">毫升 (mL)</option>
          </select>
        </div>
      </div>

      <div class="input-group">
        <label>目标碳酸化水平 (CO₂ vol):</label>
        <input 
          type="number" 
          v-model="targetCarbonation" 
          min="0" 
          max="5"
          step="0.1"
          placeholder="2.5"
        >
        <div class="helper-text">
          常见范围: 皮尔森 2.4-2.8, 小麦啤酒 3.3-4.5, 淡色艾尔 1.5-2.0
        </div>
      </div>

      <div class="input-group">
        <label>啤酒温度:</label>
        <div class="input-with-unit">
          <input 
            type="number" 
            v-model="beerTemp" 
            min="-5" 
            max="30"
            step="0.1"
            placeholder="20"
          >
          <span class="unit">°C</span>
        </div>
      </div>

      <div class="input-group">
        <label>麦汁原始比重 (OG):</label>
        <input 
          type="number" 
          v-model="speiseOG" 
          min="1.030" 
          max="1.100"
          step="0.001"
          placeholder="1.048"
        >
      </div>
    </div>

    <!-- 计算结果 -->
    <div v-if="canCalculate" class="results-section">
      <h3>计算结果</h3>
      <div class="calculation-results">
        <div class="result-item">
          <span class="result-label">所需Speise体积:</span>
          <span class="result-value">{{ speiseVolume.toFixed(1) }} {{ volumeUnit }}</span>
        </div>
        <div class="result-item">
          <span class="result-label">占总体积比例:</span>
          <span class="result-value">{{ speiseRatio.toFixed(1) }}%</span>
        </div>
        <div class="result-item">
          <span class="result-label">最终CO₂含量:</span>
          <span class="result-value">{{ targetCarbonation }} vol ({{ (targetCarbonation * 1.96).toFixed(1) }} g/L)</span>
        </div>
        <div class="result-item">
          <span class="result-label">溶解CO₂:</span>
          <span class="result-value">{{ dissolvedCO2.toFixed(2) }} vol</span>
        </div>
      </div>
    </div>

    <!-- 参考信息 -->
    <div class="reference-section">
      <h3>啤酒风格碳酸化参考</h3>
      <div class="style-reference-grid">
        <div v-for="(range, style) in carbonationRanges" :key="style" class="style-reference-item">
          <span class="style-name">{{ style }}</span>
          <span class="carbonation-range">{{ range }} vol</span>
        </div>
      </div>
    </div>

    <!-- 使用说明 -->
    <div class="info-section">
      <h3>使用说明</h3>
      <ul>
        <li>Speise是用于自然碳酸化的未发酵麦汁</li>
        <li>计算考虑了温度对CO₂溶解度的影响</li>
        <li>确保Speise的比重与原始麦汁相同</li>
        <li>储存在发酵温度下进行碳酸化</li>
        <li>碳酸化过程通常需要1-2周时间</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 响应式状态
const beerVolume = ref('')
const volumeUnit = ref('L')
const targetCarbonation = ref('')
const beerTemp = ref('')
const speiseOG = ref('')

// 啤酒风格碳酸化范围
const carbonationRanges = {
  '德国小麦啤酒': '3.3-4.5',
  '比利时三料': '3.0-4.0',
  '德国皮尔森': '2.4-2.8',
  '捷克皮尔森': '2.2-2.6',
  '比利时金啤': '2.0-2.5',
  '英式淡色艾尔': '1.5-2.0',
  '英式苦啤酒': '1.3-1.7',
  '爱尔兰世涛': '1.8-2.2',
  '波特啤酒': '1.7-2.3',
  '美式拉格': '2.2-2.7'
}

// 计算溶解CO2
const dissolvedCO2 = computed(() => {
  if (!beerTemp.value) return 0
  const temp = Number(beerTemp.value)
  // 基于温度的CO2溶解度计算 (Henry's Law)
  return 3.0378 - 0.050062 * temp + 0.00026555 * temp * temp
})

// 计算所需Speise体积
const speiseVolume = computed(() => {
  if (!canCalculate.value) return 0
  
  const volume = Number(beerVolume.value)
  const targetVol = Number(targetCarbonation.value)
  const currentVol = dissolvedCO2.value
  const og = Number(speiseOG.value)
  
  // 转换为mL进行计算
  const volumeInMl = volumeUnit.value === 'L' ? volume * 1000 : volume
  
  // Speise计算公式
  // 考虑温度、目标碳酸化水平和麦汁比重
  const sugarFactor = (og - 1) * 2.5 // 每点比重可发酵糖的CO2产量
  const requiredCO2 = (targetVol - currentVol) * volumeInMl * 1.96 // g/L to vol
  const speiseVol = requiredCO2 / sugarFactor
  
  // 转换回选择的单位
  return volumeUnit.value === 'L' ? speiseVol / 1000 : speiseVol
})

// 计算Speise比例
const speiseRatio = computed(() => {
  if (!beerVolume.value || !speiseVolume.value) return 0
  return (speiseVolume.value / Number(beerVolume.value)) * 100
})

// 验证输入是否完整
const canCalculate = computed(() => {
  return beerVolume.value && 
         targetCarbonation.value && 
         beerTemp.value && 
         speiseOG.value &&
         Number(beerVolume.value) > 0 &&
         Number(targetCarbonation.value) > 0 &&
         Number(speiseOG.value) >= 1.030
})
</script>

<style scoped>
.speise-calculator {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.input-section {
  margin: 20px 0;
  display: grid;
  gap: 15px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.input-with-unit {
  display: flex;
  gap: 10px;
  align-items: center;
}

.input-with-unit input {
  flex: 1;
}

.unit {
  min-width: 30px;
  text-align: center;
}

.helper-text {
  font-size: 0.9em;
  color: #666;
  margin-top: 4px;
}

input[type="number"],
select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

/* 移除数字输入框的上下箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.results-section {
  margin: 20px 0;
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.calculation-results {
  display: grid;
  gap: 12px;
}

.result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #ddd;
}

.result-item:last-child {
  border-bottom: none;
}

.result-label {
  color: #666;
}

.result-value {
  font-weight: 500;
  color: #2c3e50;
}

.reference-section {
  margin-top: 30px;
}

.style-reference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.style-reference-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.style-name {
  font-weight: 500;
}

.carbonation-range {
  color: #666;
}

.info-section {
  margin-top: 30px;
  padding: 15px;
  background-color: #fff8e1;
  border-radius: 8px;
}

.info-section ul {
  margin: 10px 0;
  padding-left: 20px;
}

.info-section li {
  margin: 5px 0;
  color: #666;
}
</style> 